<template>
  <a-form
    :model="loginForm"
    :rules="loginRules"
    @finish="handleLogin"
    class="login-form"
    layout="vertical"
  >
    <a-form-item label="tsToken" name="tsToken">
      <a-input
        v-model:value="loginForm.tsToken"
        placeholder="请输入tsToken"
        :size="size"
        :disabled="loading"
      >
        <template #prefix>
          <SafetyCertificateOutlined class="input-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item>
      <a-button
        type="primary"
        html-type="submit"
        :size="size"
        :loading="loading"
        :block="block"
        class="login-button"
      >
        {{ loading ? '登录中...' : '登录' }}
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { SafetyCertificateOutlined } from '@ant-design/icons-vue';
import { useUserStore } from '../store/user';
import type { LoginForm, LoginParams } from '../server/type';

// 定义组件属性
interface Props {
  size?: 'small' | 'middle' | 'large';
  block?: boolean;
  autoFocus?: boolean;
}

// 定义组件事件
interface Emits {
  (e: 'success'): void;
  (e: 'error', error: string): void;
}

withDefaults(defineProps<Props>(), {
  size: 'large',
  block: true,
  autoFocus: false
});

const emit = defineEmits<Emits>();

// 用户状态管理
const userStore = useUserStore();

// 加载状态
const loading = ref(false);

// 登录表单数据
const loginForm = reactive<LoginForm>({
  tsToken: ''
});

// 表单验证规则
const loginRules = {
  tsToken: [
    { required: true, message: '请输入tsToken', trigger: 'blur' },
    { min: 1, message: 'tsToken不能为空', trigger: 'blur' }
  ]
};

/**
 * 处理登录
 */
const handleLogin = async (values: LoginForm) => {
  try {
    loading.value = true;
    
    const loginParams: LoginParams = {
      tsToken: values.tsToken
    };

    // 调用登录接口
    await userStore.login(loginParams);
    
    message.success('登录成功');
    
    // 触发成功事件
    emit('success');
    
  } catch (error) {
    console.error('登录失败:', error);
    const errorMessage = error instanceof Error ? error.message : '登录失败，请检查tsToken是否正确';
    message.error(errorMessage);
    
    // 触发错误事件
    emit('error', errorMessage);
  } finally {
    loading.value = false;
  }
};

/**
 * 重置表单
 */
const resetForm = () => {
  loginForm.tsToken = '';
};

/**
 * 设置tsToken值
 */
const setTsToken = (token: string) => {
  loginForm.tsToken = token;
};

/**
 * 获取当前tsToken值
 */
const getTsToken = () => {
  return loginForm.tsToken;
};

// 暴露方法给父组件
defineExpose({
  resetForm,
  setTsToken,
  getTsToken
});
</script>

<style scoped>
.login-form {
  margin-bottom: 0;
}

.input-icon {
  color: #bfbfbf;
}

.login-button {
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  margin-top: 8px;
}

/* 小尺寸按钮样式 */
.login-form :deep(.ant-btn-sm) {
  height: 32px;
  font-size: 14px;
}

/* 中等尺寸按钮样式 */
.login-form :deep(.ant-btn) {
  height: 40px;
  font-size: 14px;
}

/* 大尺寸按钮样式 */
.login-form :deep(.ant-btn-lg) {
  height: 48px;
  font-size: 16px;
}
</style>
